<template>
  <div :class="$style.listTable">
      <!-- <el-scrollbar style="height:100%"> -->
          <div>
              <el-row :class="item[keyName] === selectedId ? 'active' : ''" @click.native="selected(item[keyName])" v-for="item of tableData" :key="item[keyName]">
                    <el-col :span="titleSpan" class="title">{{item[valueName]}}</el-col>
                    <el-col :span="extSpan" class="ext"><slot :row='item' name="ext" /></el-col>
              </el-row>

          </div>
      <!-- </el-scrollbar> -->

  </div>
</template>

<script>
export default {
  name: "Dialong",
  props: {
      height: {
          type: String,
          default: '340'
      },
      tableData: {
          type: Array,
          default: () => []
      },
      keyName: {
          type: String,
          default: 'id'
      },
      valueName: {
          type: String,
          default: 'name'
      },
      titleSpan: {
          type: Number,
          default: 24
      },
      extSpan: {
          type: Number,
          default: 0
      },
      // 选中时回调给父组件的函数
      select: {
          type: Function,
          default: () => {}
      }

  },
  data() {
    return {
        selectedId: ''
    };
  },
  methods: {
      selected(id){
          this.selectedId = id
          this.select(id)
      }
  }
};
</script>
<style module lang='scss'>
.listTable{
    // height: 100%;

    :global{
        .active{
            background-color: #e5f2ff;
        }
        .el-scrollbar__wrap{
            overflow-x: hidden;
        }
        .title{
            font-size: 14px;
            color: #666;
            line-height: 28px;
        }
        .el-row{
            cursor: pointer;
            padding-left: 20px;
        }
        .ext{
            font-size: 14px;
            line-height: 28px;
        }
    }
}
</style>
